import React from 'react';
import { Icon, Row } from 'antd';
import classNames from 'classnames';
import { WeaCheckbox, WeaInput, WeaLocaleProvider } from 'ecCom';
import { ruleTypes } from '../../../../../constants/form';
import { CHECKED, UNCHECKED } from '../../../../../constants/common';

const { FIELD, JUMP } = ruleTypes;
const { getLabel } = WeaLocaleProvider;

const Item = ({ active, onClick, children }) => (
  <li
    className={classNames({ active })}
    onClick={onClick}
  >
    {children}
  </li>
);

const List = ({ data = [], onClick, active, text }) => (
  <ul>
    {data.map(item => (
      <Item
        active={active(item)}
        onClick={() => onClick(item)}
      >
        {text(item)}
      </Item>
    ))}
  </ul>
);

export default class RuleSettings extends React.Component {
  static defaultProps = {
    rule: null, // 规则
    triggers: [], // 触发规则的插件
    targets: [], // 可以使用规则的插件
    onChange: () => { } // 规则change回调
  };

  constructor(props) {
    super();

    const {
      trigger = {},
    } = props.rule | {};

    this.state = {
      targets: this.getTargets(props.targets, trigger)
    };
  }

  componentWillReceiveProps(nextProps) {
    if(!nextProps.rule) return;

    const { trigger } = nextProps.rule;

    this.setState({
      targets: this.getTargets(nextProps.targets, trigger)
    });
  }

  onTriggerChange = trigger => {
    const { targets, onChange, rule } = this.props;
    const newTargets = this.getTargets(targets, trigger);
    let newTarget = rule.target;

    if(FIELD === rule.type) {
      newTarget = rule.target.filter(t => newTargets.find(nt => t.id === nt.id));

      this.setState({
        targets: this.getTargets(targets, trigger)
      });
    }

    onChange({
      trigger,
      option: { key: '', showname: '' },
      target: newTarget
    });
  }

  getTargets(targets, trigger) {
    const index = targets.findIndex(t => trigger.id === t.id);

    return targets.slice(index + 1);
  }

  onOptionChange = option => {
    this.props.onChange({ option });
  }

  onTargetChange = (target, isChecked) => {
    const { rule, onChange } = this.props;

    if(JUMP === rule.type) {
      return onChange({ target });
    }
    const t = [...rule.target];

    if(!isChecked) {
      const index = t.findIndex(t => t.id === target.id);

      t.splice(index, 1);
    } else {
      t.push(target);
    }

    onChange({ target: t });
  }

  renderRuleAction() {
    const { targets } = this.state;
    const { rule: { type, target } } = this.props;
    const style = { marginBottom: 5 };

    if(FIELD === type) {
      return (
        <Row>
          <p style={style}>{getLabel(503923,'就显示以下字段')}</p>
          {targets.map(t => (
            <WeaCheckbox
              style={{ display: 'block' }}
              value={target.find(ts => t.id === ts.id) ? CHECKED : UNCHECKED}
              content={t.name}
              onChange={v => this.onTargetChange(t, v === CHECKED)}
            />
          ))}
        </Row>
      );
    } else if(JUMP === type) {
      return (
        <Row>
          <p style={style}>{getLabel(503924,'就跳转到')}:</p>
          <WeaInput placeholder={`${getLabel(83103,'如')}: http://www.xxx.com`} value={target} onChange={this.onTargetChange} />
        </Row>
      )
    }
  }

  render() {
    const { rule, triggers } = this.props;

    if(!rule) return null;

    const { trigger, option } = rule;

    return (
      <div className='rule-settings-container'>
        <h4><Icon type='settings' />{getLabel(503925,'设置规则')}</h4>
        <Row>
          <p style={{ margin: '5px 0' }}>{getLabel(503926,'如果')}:</p>
          {getLabel(503928,'在______中')}
          <List
            data={triggers}
            active={({ id }) => trigger.id === id}
            text={({ name }) => name}
            onClick={this.onTriggerChange}
          />
        </Row>
        <Row>
          {getLabel(503929,'选择了')}______
          <List
            data={trigger.options}
            active={({ key }) => option.key === key}
            text={({ showname }) => showname}
            onClick={this.onOptionChange}
          />
        </Row>
        {this.renderRuleAction()}
      </div>
    );
  }
}